<template>
    <div id="render_box">
            <div class='box-title'>{{title_}}榜</div>
            <div class="func-nav">
                        <a-divider />
                        
                 <Button v-for="(item,index) in list_nav_text" :key="index"  
                 @click="list_nav_click(item.value)" class="Button" :type="item.type">{{item.name}}</Button>
                

            </div>
            <div class="song-display">
                <div v-for="(item,index) in data_test"  :key="item.music_id">
                    <div v-if="index%2==0" class="song-box color-list1" @mouseover="display_select" @mouseleave="hide_select" >
                            <div>{{index+1}}</div>
                            <div  :si="item.singer_id" :mi="item.music_id">
                                <a href=""><img  style="height: 80px;width: 80px;display: inline-block;vertical-align: top;margin:0 5px 0 5px; padding: 2px;" src="../../../../../public/background_index.jpg" alt=""></a>
                                <a href="">{{item.song}}</a>                       
                                <span id="list1"   :name="'n'+item.music_id"  @click="play_item" class="iconfont  icon-bofang list_span"></span><span @click="add_to" id="list2" class="iconfont icon-tianjia list_span"></span><span @click="select_more" id="list3" class="iconfont icon-gengduo list_span"></span>
                            </div> 
                            <div style="width: 100px;">{{item.singer}}</div>
                            <div>{{item.timelong}}</div>
                    </div>
                    <div v-else class="song-box color-list2" @mouseover="display_select" @mouseleave="hide_select" >
                            <div>{{index+1}}</div>
                            <div :si="item.singer_id" :mi="item.music_id">
                                <a href=""><img  style="height: 80px;width: 80px;display: inline-block;vertical-align: top;margin:0 5px 0 5px; padding: 2px;" src="../../../../../public/background_index.jpg" alt=""></a>
                                <a href="">{{item.song}}</a>                       
                                <span id="list1" :name="'n'+item.music_id" @click="play_item" class="iconfont  icon-bofang list_span"></span><span @click="add_to" id="list2" class="iconfont icon-tianjia list_span"></span><span @click="select_more" id="list3" class="iconfont icon-gengduo list_span"></span>
                            </div> 
                            <div style="width: 100px;">{{item.singer}}</div>
                            <div>{{item.timelong}}</div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script setup>

import { onMounted ,ref,inject} from 'vue';
import { useRoute } from 'vue-router';
let musicList_all=inject('music')()
let list_nav_text = ref([
    { name: "全部播放", value: "all" ,type:"success"},
    { name: "批量下载", value: "download" ,type:"info"},
    { name: "添加到", value: "add",type:"info" }
])


let Route = useRoute();
let title_ = ref()

let data_test= ref([
    { 'song': 'testname1' ,
    'singer': 'singer1' ,
    'singer_id': 'id' ,  
     'timelong': 'timelong' ,
     'icon_src': '"../../../../../public/background_index.jpg',
     'music_src': 'src' ,
     'music_id': 'id1'
    },
      { 'song': 'testname2' ,
    'singer': 'singer2' ,
    'singer_id': 'id' ,  
     'timelong': '03:05' ,
     'icon_src': '"../../../../../public/background_index.jpg',
     'music_src': 'src' ,
     'music_id': 'id2'
    },
      { 'song': 'testname3' ,
    'singer': 'singer3' ,
    'singer_id': 'id' ,  
     'timelong': 'timelong' ,
     'icon_src': '"../../../../../public/background_index.jpg',
     'music_src': 'src' ,
     'music_id': 'id3'},
])


// 排行上的整体选择
const list_nav_click = (e) => { 
      console.log(e.target)
}





// 每个排行列表的操作
function display_select(e) {
    e.target.parentNode.querySelectorAll('.list_span').forEach(item => {
        item.style.display = 'inline-block'
    })
}
function hide_select(e) { 
    e.target.parentNode.querySelectorAll('.list_span').forEach(item => {
        item.style.display = 'none'
    });
}

function play_item(e) {
    data_test.value.forEach(item => { 
        if ('n'+item.music_id ===e.target.getAttribute('name')) {
            console.log(musicList_all.value.musicList)
            musicList_all.value.pushdata({
         'musci_id': 'n' + 444,
         'song': '测试音乐1',
        'singer': 'singer1',
        'timelong': '3:05',
        'src': '../../../../public/test_audio.mp3'
    })
        }
    })
     console.log(musicList_all.value.musicList)
}
function add_to(e) {
        console.log(e.target)
}
function select_more(e){ 
    console.log(e.target)
}



let title_reflect = {
    '1_1': '飙升',
    '1_2': '热歌',
    '1_3': '新歌',

    '2_1': '内陆',
    '2_2': '台湾',
    '2_3': '非汉语',

    '3_1': '国风',
    '3_2': '伤感',
    '3_3': '流行',
        
}


onMounted(() => { 
    title_.value = title_reflect[Route.params.select]
})

</script>

<style scoped>
*{
    user-select: none;
}

.func-nav{
    margin-left: 100px;
    margin-bottom: 5px;
}

.Button{
    margin: 0 10px 0 10px;
}


.box-title{
    text-align: left;
    margin-left:20px;
    font-size: 25px;
}

:deep(.song-box>div){
    display: inline-block;
    height: 80px;
    line-height: 80px;
    text-align: left;
    position: relative;
    font-size: 15px;
    /* background-color: #fbfbfd; */
}
.song-box{
    width: 1200px;
    margin: 0;
}

:deep(.song-box a){
    color: black;
}
:deep(.song-box>div>div){
    position: absolute;
}
:deep(.song-box>div:nth-child(1)){
    color:#5cadff;
    width: 50px;
    /* outline: 1px solid red; */
    font-size: 18px;
    text-align: center;
}
:deep(.song-box>div:nth-child(2)){
    color:gray;
    width: 750px;
    /* outline: 1px solid gray; */
}
:deep(.song-box>div:nth-child(3)){
    color:#17233d;
    width: 200px;
    /* outline: 1px solid blue; */
}
:deep(.song-box>div:nth-child(4)){
    color:#c5c8ce;
    width: 100px;
    /* outline: 1px solid green; */
}
.iconfont{
    font-size: 20px;
}
.icon-bofang{
    font-size: 24px;
}
:deep(.list_span){
    display: none;

}
:deep(.list_span:hover){
    color:#31c37c;
}
:deep(#list1){
    position: absolute;
    right: 250px;
    font-size: 35px;
}
:deep(#list2){
    position: absolute;
    right: 200px;
    font-size: 30px;
}
:deep(#list3){
    position: absolute;
    right: 150px;
    font-size: 30px;
}
:deep(.color-list1){
    background-color: #f9f9f9;
}
:deep(.color-list2){
    background-color: white;
}


</style>